<template>
  <div class="app-container">
    <el-table :data="tableData" border style="width: 100%" max-height="561">
      <el-table-column label="物资名称" width="342">
        <template slot="header" slot-scope="scope">
          <div class="header">物资名称</div>
          <el-select v-model="purchaseList.materialName" placeholder="请选择" value-key="value" @change="getMaterialName">
            <el-option
              v-for="item in options"
              :key="item.myId"
              :label="item.name + ' [' + item.model + ']'"
              :value="item"
            />
          </el-select>
        </template>
        <template slot-scope="scope">
          {{ scope.row.materialName }}
        </template>
      </el-table-column>
      <el-table-column label="生产厂家" width="342">
        <template slot="header" slot-scope="scope">
          <div class="header">生产厂家</div>
          <el-input v-model="purchaseList.manufacturer" :disabled="true">
          </el-input>
        </template>
        <template slot-scope="scope">
          {{ scope.row.manufacturer }}
        </template>
      </el-table-column>
      <el-table-column label="单价" width="342">
        <template slot="header" slot-scope="scope">
          <div class="header">单价</div>
          <el-input v-model="purchaseList.price" :disabled="true">
            <template slot="append">元</template>
          </el-input>
        </template>
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="数量" width="342">
        <template slot="header" slot-scope="scope">
          <div class="header">数量</div>
          <el-input v-model="purchaseList.amount" placeholder="请输入数量">
            <template slot="append">个</template>
          </el-input>
        </template>
        <template slot-scope="scope">
          {{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <div class="header">操作</div>
          <el-button type="primary" plain @click="add">采购</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 90%; margin: 50px auto">
      <el-form :inline="true" :model="inForm" class="demo-form-inline">
        <el-form-item label="供应商名称" label-width="150px">
          <el-select v-model="inForm.supplierName" placeholder="请选择供应商">
            <el-option
              v-for="item in supplierList"
              :key="item.myId"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" label-width="150px">
          <el-input v-model="inForm.principal" placeholder="请输入负责人"></el-input>
        </el-form-item>
        <el-form-item label="操作员" label-width="150px">
          <el-input v-model="name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="合计金额" label-width="150px">
          <el-input v-model="inForm.aggregate" :disabled="true">
              <template slot="append">元</template>
            </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-box">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAllMaterials, getAllSupplier, submit } from '@/api/inform'
export default {
  data() {
    return {
      firstShow: false,
      tableData: [],
      purchaseList: {
        materialName: '',
        manufacturer: '',
        price: 0,
        amount: 0
      },
      options: [],
      inForm: {
        supplierName: '',
        principal: '',
        operator: '',
        aggregate: 0
      },
      supplierList: [],
        saveObj: {}
    }
  },
  computed: {
    ...mapGetters(['name']),
  },
  created() {
    this.getAllMaterials()
    this.getAllSupplier()
  },
  methods: {
    // 获取全部物资
    async getAllMaterials() {
      let res = await getAllMaterials()
      console.log(res.data.data)
      this.options = res.data.data
    },

    // 选择物资名称
    getMaterialName(e) {
      console.log(e)
      this.purchaseList.materialName = e.name + ' [' + e.model + ']'
      this.purchaseList.manufacturer = e.manufacturer
      this.purchaseList.price = e.price
      this.purchaseList.materialsId = e.myId
    },

    // 获取全部供应商
    async getAllSupplier() {
      let res = await getAllSupplier()
      console.log(res.data.data)
      this.supplierList = res.data.data
    },

    // 获取保存的时间
    getTimeDate() {
      return new Date().getTime();
    },

    // 采购
    add() {
      const obj = Object.assign({}, this.purchaseList)
      this.tableData.push(obj)
      console.log(this.tableData)
      this.inForm.aggregate = this.inForm.aggregate + this.purchaseList.price * this.purchaseList.amount
      console.log(this.aggregate)
      this.purchaseList = {
        amount: 0
      }
    },
   
    // 删除
    handleDelete(index, row) {
      console.log(row)
      this.inForm.aggregate = this.inForm.aggregate - row.price * row.amount
      this.tableData.splice(index, 1)
    },

    // 保存
    async save() {
      this.inForm.date = this.getTimeDate()
      this.inForm.operator = this.name
      this.tableData.forEach(item => {
        item.amount = Number(item.amount)
      })
      this.saveObj.inForm = this.inForm
      this.saveObj.inFormDetailList = this.tableData
      let res = await submit(this.saveObj)
      this.$message({
          message: '提交入库单成功',
          type: 'success'
        });
      console.log(res)
    },

    // 重置
    reset() {
      this.tableData = []
      this.purchaseList = {}
      this.inForm = {}
      this.inForm.aggregate = 0
    }
  }
}
</script>

<style>
  .header {
    line-height: 40px;
  }

  .btn-box {
    display: flex;
    column-gap: 50px;
    margin-top: 20px;
    justify-content: center;
  }
</style>
